import { entry_status } from '@/services/broadcast';
import { CloseOutlined } from '@ant-design/icons';
import { ActionType } from '@ant-design/pro-components';
import { Button, message, Modal, Statistic } from 'antd';
import './index.less';
const { Countdown } = Statistic;

interface Iprops {
  isShowLiveBroadcast: (show: boolean) => void;
  liveBroadcast: boolean;
  liveId: number | undefined;
  broadcastinfo: any;
  actionRef: React.MutableRefObject<ActionType | undefined>;
}
const StartLiveBroadcast = (props: Iprops) => {
  const { isShowLiveBroadcast, liveBroadcast, liveId, broadcastinfo, actionRef } = props;
  console.log('broadcastinfo', broadcastinfo);
  // 开始直播
  const go_broadcast_index = async (status: number) => {
    if (liveId) {
      let res: any = await entry_status({ id: liveId });
      if (res.code == 400) {
        message.error(res.msg);
        isShowLiveBroadcast(false);
      } else {
        setTimeout(() => actionRef.current?.reload(), 5000);
        if (status == 0) {
          localStorage.removeItem('actionList');
          localStorage.removeItem('chatList');
        }
        isShowLiveBroadcast(false);
        window.open(`/broadcast/broadcast_index?id=${liveId}`, 'broadcast_index');
      }
    }
  };
  return (
    <Modal
      wrapClassName="broadcast_box_modal"
      style={{ borderRadius: '60px', padding: '0' }}
      open={liveBroadcast}
      onCancel={() => isShowLiveBroadcast(false)}
      closeIcon={<CloseOutlined style={{ color: '#fff' }} />}
      centered
      width={1160}
      destroyOnClose={true}
      footer={null}
    >
      <div className="broadcast_box">
        <p className="tips">距离直播还剩</p>
        {broadcastinfo !== undefined ? (
          <>
            {broadcastinfo.status == 0 ? (
              <Countdown
                value={broadcastinfo.start_time}
                format="HH:mm:ss"
                valueStyle={{ fontSize: '50px', color: '#3AABFF', lineHeight: '70px' }}
              />
            ) : (
              <p style={{ fontSize: '18px', color: 'green' }}>直播已开启......</p>
            )}

            <p className="title">{broadcastinfo.name}</p>
            <p className="name">
              主讲医生：{broadcastinfo.username}（{broadcastinfo.positional_name}）
            </p>
            <Button
              className="button"
              type="primary"
              onClick={() => go_broadcast_index(broadcastinfo.status)}
            >
              {broadcastinfo.status == 0 ? '开始直播' : '进入直播间'}
            </Button>
          </>
        ) : (
          ''
        )}
      </div>
    </Modal>
  );
};
export default StartLiveBroadcast;
